﻿<div class="header"><label class="title">添加按钮</label></div>
<div class="category-view">
    <div class="sections">
        <div class="section-wrapper live-comps">
            <div class="section-header">
                <div class="title-line">
                    <div class="title">主题按钮</div>
                </div>
            </div>
            <div class="items">
                <div class="domItem preset-item">
                    <a href="javascript:;" data-bgcolor="" class="btn btn-primary">操作按钮</a>
                </div>
                <div class="domItem preset-item">
                    <a href="javascript:;" data-bgcolor="" class="btn btn-info">信息按钮</a>
                </div>
            </div>
            <div class="items">
                <div class="domItem preset-item">
                    <a href="javascript:;" data-bgcolor="" class="btn btn-danger">警告按钮</a>
                </div>
                <div class="domItem preset-item">
                    <a href="javascript:;" data-bgcolor="" class="btn btn-warning">提示按钮</a>
                </div>
            </div>
        </div>
        <div class="section-wrapper live-comps">
            <div class="section-header">
                <div class="title-line">
                    <div class="title">图标按钮</div>
                </div>
                <div class="domItem preset-item-4">
                    <a href="javascript:;" class="btn_icon_circular" data-bgcolor="#3d9be9" style="background-color: #3d9be9;"><i class="fa fa-home"></i></a>
                </div>
                <div class="domItem preset-item-4">
                    <a href="javascript:;" class="btn_icon_circular" data-bgcolor="#ed3b77" style="background-color:#ed3b77"><i class="fa fa-arrow-right"></i></a>
                </div>
                <div class="domItem preset-item-4">
                    <a href="javascript:;" class="btn_icon_circular" data-bgcolor="#a757ed" style="background-color: #a757ed;"><i class="fa fa-star"></i></a>
                </div>
                <div class="domItem preset-item-4">
                    <a href="javascript:;" class="btn_icon_circular" data-bgcolor="#7307be" style="background-color:#7307be;"><i class="fa fa-question"></i></a>
                </div>
                <div class="domItem preset-item-4">
                    <a href="javascript:;" class="btn_icon_circular" data-bgcolor="#930759" style="background-color:#930759;"><i class="fa fa-angle-right"></i></a>
                </div>
                <div class="domItem preset-item-4">
                    <a href="javascript:;" class="btn_icon_circular" data-bgcolor="#003b8e" style="background-color:#003b8e;"><i class="fa fa-map-marker"></i></a>
                </div>
                <div class="domItem preset-item-4">
                    <a href="javascript:;" class="btn_icon_circular" data-bgcolor="#13c674" style="background-color:#13c674;"><i class="fa fa-calendar"></i></a>
                </div>
                <div class="domItem preset-item-4">
                    <a href="javascript:;" class="btn_icon_circular" data-bgcolor="#024e08" style="background-color:#024e08;"><i class="fa fa-music"></i></a>
                </div>
                <div class="domItem preset-item-4">
                    <a href="javascript:;" class="btn_icon_circular" data-bgcolor="#030748" style="background-color:#030748;"><i class="fa fa-envelope-o"></i></a>
                </div>
                <div class="domItem preset-item-4">
                    <a href="javascript:;" class="btn_icon_circular" data-bgcolor="#260860" style="background-color:#260860;"><i class="fa fa-meh-o"></i></a>
                </div>
                <div class="domItem preset-item-4">
                    <a href="javascript:;" class="btn_icon_circular" data-bgcolor="#bd0303" style="background-color:#bd0303;"><i class="fa fa-pencil"></i></a>
                </div>
                <div class="domItem preset-item-4">
                    <a href="javascript:;" class="btn_icon_circular" data-bgcolor="#b93737" style="background-color:#b93737;"><i class="fa fa-globe"></i></a>
                </div>
                <div class="domItem preset-item-4">
                    <a href="javascript:;" class="btn_icon_circular" data-bgcolor="#074204" style="background-color:#074204;"><i class="fa fa-spinner fa-spin"></i></a>
                </div>
                <div class="domItem preset-item-4">
                    <a href="javascript:;" class="btn_icon_circular" data-bgcolor="#4fc776" style="background-color:#4fc776;"><i class="fa fa-circle-o-notch fa-spin"></i></a>
                </div>
                <div class="domItem preset-item-4">
                    <a href="javascript:;" class="btn_icon_circular" data-bgcolor="#c7c43f" style="background-color:#c7c43f;"><i class="fa fa-refresh fa-spin"></i></a>
                </div>
                <div class="domItem preset-item-4">
                    <a href="javascript:;" class="btn_icon_circular" data-bgcolor="#ac5a15" style="background-color:#ac5a15;"><i class="fa fa-globe fa-spin"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function GetModel(item) {
        var $btn = $(item).find("a");
        var btnstyle = "background-color: " + $btn.data("bgcolor") + ";color:#fff;";
        if ($btn.hasClass("btn_icon_circular")) { btnstyle += "width:120px;height:120px;font-size:60px;"; }
        else { btnstyle += "width:200px;height:100px;font-size:40px;"; }
        var model = { dataMod: { value: '', html: "" }, config: { type: "button", compid: "", css: "candrag", class: $btn.attr("class"), btnstyle: btnstyle, style: "" } };
        model.dataMod.value = $btn.html();
        return model;
    }
</script>